import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:player_plugin/video_volume_style.dart';

class VolumeWidget extends StatefulWidget {
  final ValueListenable<double> volume;
  final VideoVolumeStyle videoVolumeStyle;

  VolumeWidget({
    Key? key,
    required this.volume,
    VideoVolumeStyle? videoVolumeStyle,
  })  : videoVolumeStyle = videoVolumeStyle ?? VideoVolumeStyle(),
        super(key: key);

  @override
  State<VolumeWidget> createState() => _VolumeWidgetState();
}

class _VolumeWidgetState extends State<VolumeWidget> {
  ValueListenable<double> get volume => widget.volume;

  VideoVolumeStyle get videoVolumeStyle => widget.videoVolumeStyle;

  bool hidden = true;
  Timer? timer;

  @override
  void initState() {
    super.initState();
    volume.addListener(listener);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ValueListenableBuilder(
        valueListenable: volume,
        builder: (BuildContext context, double value, Widget? child) {
          double height = value * videoVolumeStyle.size.height;
          Icon icon = Icon(
            Icons.volume_up,
            color: videoVolumeStyle.iconColor,
            size: videoVolumeStyle.iconSize,
          );
          if (value <= 0) {
            icon = Icon(
              Icons.volume_off,
              color: videoVolumeStyle.iconColor,
              size: videoVolumeStyle.iconSize,
            );
          }
          return Offstage(
            offstage: hidden,
            child: Container(
              width: videoVolumeStyle.size.width,
              height: videoVolumeStyle.size.height,
              decoration: BoxDecoration(
                color: videoVolumeStyle.backgroundColor,
                borderRadius: videoVolumeStyle.borderRadius,
              ),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Positioned(
                    left: 0.0,
                    bottom: 0.0,
                    child: Container(
                      width: videoVolumeStyle.size.width,
                      height: height,
                      decoration: BoxDecoration(
                        color: videoVolumeStyle.fillColor,
                        borderRadius: videoVolumeStyle.borderRadius,
                      ),
                    ),
                  ),
                  Positioned(bottom: 16.0, child: icon),
                  Positioned(
                    bottom: 4.0,
                    child: Text(
                      '${height.toInt()}%',
                      style: videoVolumeStyle.textStyle,
                    ),
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    volume.removeListener(listener);
    timer?.cancel();
    super.dispose();
  }

  void listener() {
    if (hidden) {
      hidden = false;
      setState(() {});
    }
    timer?.cancel();
    timer = Timer(const Duration(milliseconds: 250), () {
      hidden = true;
      setState(() {});
      timer?.cancel();
    });
  }
}
